<template>
	<div class="right-center">
		<el-table :data="JSON.stringify(activeInfo)=='{}'?[]:[activeInfo]" border :size="size" row-key="id"
			:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
			<el-table-column prop="id" label="ID" width="180"  show-overflow-tooltip></el-table-column>
			<el-table-column prop="name" label="名称"  show-overflow-tooltip></el-table-column>
			<el-table-column prop="url" label="路径"  show-overflow-tooltip width="180"></el-table-column>
			<el-table-column prop="sortNo" label="排序"  show-overflow-tooltip></el-table-column>
			<el-table-column prop="icon" label="图标" show-overflow-tooltip >
				<template slot-scope="scope">
					<div :class="scope.row.icon"></div>
				</template>
			</el-table-column>
			<el-table-column prop="menuType" label="类型" show-overflow-tooltip >
				<template slot-scope="scope">
					<div v-if="scope.row.menuType==0">菜单</div>
					<div v-if="scope.row.menuType==1">子菜单</div>
					<div v-if="scope.row.menuType==2">按钮</div>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作"  width="100">
				<template slot-scope="scope">
					<el-button code="menuManagement-btn-editRurisdiction" @click="permissionBtn(scope.row,'编辑')"
						type="text" size="small">编辑</el-button>
					<el-button code="menuManagement-btn-delRurisdiction" @click="permissionBtn(scope.row,'删除')"
						type="text" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-divider content-position="left">页面对应的输入框配置</el-divider>
		<div class="lz-header">
			<el-row>
				<el-col :xs="24" :sm="24" :md="16" :lg="17" :xl="16">
					<el-button code="menuManagement-btn-addUrl" class="lz-header-bt" type="primary" icon="el-icon-plus"
						:size="size" @click="clickBtnType('添加输入框配置')">添加输入框配置</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="r-c-center">
			<el-table :data="table.list" border :size="size" row-key="id"
				:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
				<el-table-column prop="createdDate" label="创建日期"  show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="createdBy" label="创建人"  show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="fieldLabel" label="字段标签名"  show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="fieldName" label="字段名称"  show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="menuName" label="菜单名称"  show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="menuNo" label="菜单ID"  show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="isDisplay" label="是否只读"  show-overflow-tooltip>
					<template slot-scope="scope">
						{{scope.row.isDisplay==0?'是':'否'}}
					</template>
				</el-table-column>
				<el-table-column prop="isVisible" label="是否显隐"  show-overflow-tooltip>
					<template slot-scope="scope">
						{{scope.row.isVisible==0?'是':'否'}}
					</template>
				</el-table-column>
				<el-table-column prop="isInput" label="是否必填"  show-overflow-tooltip>
					<template slot-scope="scope">
						{{scope.row.isInput==0?'是':'否'}}
					</template>
				</el-table-column>
				<el-table-column prop="isGrid" label="GRID是否显隐"  show-overflow-tooltip>
					<template slot-scope="scope">
						{{scope.row.isGrid==0?'是':'否'}}
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作"  width="140">
					<template slot-scope="scope">
						<el-button  @click="urlBtn(scope.row,'编辑')"
							type="text" size="small">编辑</el-button>
						<el-button @click="urlBtn(scope.row,'删除')" type="text"
							size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" class="el-pagination"
				background layout="total, sizes,prev, pager, next,jumper" :page-sizes="[10, 20, 30, 40]"
				:page-size="table.page.pageSize" :total="table.page.total">
			</el-pagination>
		</div>
		<!-- 添加权限 -->
		<el-dialog :title="dialog.title" :visible.sync="dialog.show" width="400px" center v-dialogDrag custom-class="lz-el-dialog lz-el-dialog-autoHight">
			<div>
				<el-form :model="dialog.ruleForm" :rules="dialog.rules" ref="ruleForm" label-width="70px"
					class="demo-ruleForm" :size="size">
					<el-form-item label="菜单类型" prop="parentId">
						<el-radio-group v-model="dialog.ruleForm.menuType">
							<el-radio :label="0">一级菜单</el-radio>
							<el-radio :label="1">子菜单</el-radio>
							<el-radio :label="2">按钮</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="上级菜单" prop="parentId" v-if="dialog.ruleForm.menuType!=0">
						<el-input v-model="dialog.ruleForm.parentId"></el-input>
					</el-form-item>
					<el-form-item label="名称" prop="name">
						<el-input v-model="dialog.ruleForm.name" :size="size"></el-input>
					</el-form-item>
					<el-form-item label="路径" prop="url">
						<el-input v-model="dialog.ruleForm.url" :size="size"></el-input>
					</el-form-item>
					<el-form-item label="图标" prop="icon">
						<el-input v-model="dialog.ruleForm.icon" style="width: 79%;" :size="size"></el-input>
						<el-button type="success" :size="size" @click="drawer.show=true">选择</el-button>
					</el-form-item>
					<el-form-item label="排序" prop="sortNo">
						<el-input v-model="dialog.ruleForm.sortNo" type="number" :size="size"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialog.show = false" :size="size">取 消</el-button>
				<el-button type="primary" @click="submitForm" :size="size">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 添加或编辑输入框配置 -->
		<el-dialog :title="dialogInput.title" :visible.sync="dialogInput.show" width="400px" center v-dialogDrag :close-on-click-modal="false" custom-class="lz-el-dialog lz-el-dialog-autoHight">
			<div>
				<el-form :model="dialogInput.ruleForm" :rules="dialogInput.rules" ref="ruledialogInput" label-width="100px"
					class="demo-ruleForm" :size="size">
					<el-form-item label="菜单名称" prop="menuName">
						<el-input v-model="dialogInput.ruleForm.menuName" class="lz-el-input" ></el-input>
					</el-form-item>
					<el-form-item label="菜单ID" prop="menuNo">
						<el-input v-model="dialogInput.ruleForm.menuNo" class="lz-el-input" ></el-input>
					</el-form-item>
					<el-form-item label="选择表名" prop="fieldName">
						<el-select v-model="dialogInput.ruleForm.tableName" placeholder="请选择" :size="size"
							clearable class="lz-el-select" filterable @change="dialogInputSelectChange">
							<el-option v-for="item in dialogInput.tableNameList" :key="item.tableName" :label="item.tableName"
								:value="item.tableName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="字段名称" prop="fieldName">
						<el-select v-model="dialogInput.ruleForm.fieldObj" placeholder="请选择" :size="size"
							clearable class="lz-el-select" filterable value-key="columnName">
							<el-option v-for="item in dialogInput.tableColumnList" :key="item.columnName" :label="item.columnName"
								:value="item"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="字段描述" prop="fieldLabel" v-if="dialogInput.ruleForm.fieldObj">
						<el-input v-model="dialogInput.ruleForm.fieldObj.columnComment" :value="dialogInput.ruleForm.fieldObj.columnComment" class="lz-el-input" ></el-input>
					</el-form-item>
					<el-form-item label="GRID显隐" prop="isGrid">
						<el-radio-group v-model="dialogInput.ruleForm.isGrid">
							<el-radio :label="0">显示</el-radio>
							<el-radio :label="1">隐藏</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="是否显示" prop="isVisible">
						<el-radio-group v-model="dialogInput.ruleForm.isVisible">
							<el-radio :label="0">显示</el-radio>
							<el-radio :label="1">隐藏</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="是否只读" prop="isDisplay">
						<el-radio-group v-model="dialogInput.ruleForm.isDisplay">
							<el-radio :label="0">是</el-radio>
							<el-radio :label="1">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="是否必填" prop="isInput">
						<el-radio-group v-model="dialogInput.ruleForm.isInput">
							<el-radio :label="0">是</el-radio>
							<el-radio :label="1">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="备注说明" prop="note">
						<el-input v-model="dialogInput.ruleForm.note" class="lz-el-input"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogInput.show = false" :size="size">取 消</el-button>
				<el-button type="primary" @click="submitDialogInput" :size="size">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 图标选取 -->
		<el-drawer title="图标选取" :visible.sync="drawer.show" direction="rtl" size="560px">
			<el-scrollbar style="height: 45%;">
				<ul class="drawer-ul">
					<li v-for="(item,index) in drawer.list" :key="index" class="ul-li" @click="selectIcon(item)">
						<i class="p1" :class="item"></i>
						<span class="p2">{{item}}</span>
					</li>
				</ul>
			</el-scrollbar>
		</el-drawer>


	</div>
</template>

<script>
	let that
	import {
		mapGetters
	} from 'vuex'
	import bus from '../../../../../static/js/bus.js'
	export default {
		name: 'menuList',
		props: {
			activeInfo: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		computed: {
			...mapGetters(['api', 'buttonPermissions','size']),
			computeBtn() { //计算是否有权限的按钮
				return (code) => {
					return this.buttonPermissions.includes(code)
				}
			}
		},
		watch: {
			activeInfo: {
				handler(data) {
					//获取权限拥有的输入框列表
					that.getPermissionUrlList()
				},
				deep: true,
				// immediate: true
			}
		},
		data() {
			return {
				//输入框表格数据
				table: {
					list: [],
					page: {
						pageNo: 1,
						pageSize: 10,
						total: 0,
					}
				},
				// 权限弹框
				dialog: {
					title: '',
					show: false,
					ruleForm: {
						parentId: '', //父节点
						name: '', //名称
						code: '', //编码
						url: '', //路径
						icon: '', //图标
						sortNo: '', //排序
						menuType: 0, //类型 0一级菜单 1子菜单 2按钮
					},
					rules: {
						name: [{
							required: true,
							message: '请输入名称',
							trigger: 'blur'
						}],
						code: [{
							required: true,
							message: '请输入编码',
							trigger: 'blur'
						}],
						url: [{
							required: true,
							message: '请输入路径',
							trigger: 'blur'
						}],
						menuType: [{
							required: true,
							message: '请输入类型',
							trigger: 'blur'
						}],
					}
				},
				// 输入框配置
				dialogInput: {
					title: '',
					show: false,
					tableNameList:[],//所有表
					tableColumnList:[],//当前表所有字段
					ruleForm: {
						menuName:'',//菜单名称
						menuNo:'',//菜单编号
						tableName:'',//表名
						fieldObj: '', //字段对象
						isGrid:0, //是否显隐 0显示
						isVisible: 0, //是否显隐 0显示
						isInput: 1, //是否必填 0必填
						isDisplay: 1, //是否只读 0只读
						note: '', //备注说明
					},
					rules: {
						url: [{
							required: true,
							message: '请输入名称',
							trigger: 'blur'
						}]
					}
				},
				//图标选取
				drawer: {
					show: false,
					list: ['el-icon-platform-eleme', 'el-icon-eleme', 'el-icon-delete-solid', 'el-icon-delete',
						'el-icon-s-tools', 'el-icon-setting', 'el-icon-user-solid', 'el-icon-user', 'el-icon-phone',
						'el-icon-phone-outline',
						'el-icon-more', 'el-icon-more-outline', 'el-icon-star-on', 'el-icon-star-off',
						'el-icon-s-goods', 'el-icon-goods', 'el-icon-warning', 'el-icon-warning-outline',
						'el-icon-question',
						'el-icon-info', 'el-icon-remove', 'el-icon-circle-plus', 'el-icon-success', 'el-icon-error',
						'el-icon-zoom-in', 'el-icon-zoom-out', 'el-icon-remove-outline', 'el-icon-circle-plus-outline',
						'el-icon-circle-check',
						'el-icon-circle-close', 'el-icon-s-help', 'el-icon-help', 'el-icon-minus', 'el-icon-plus',
						'el-icon-check', 'el-icon-close', 'el-icon-picture', 'el-icon-picture-outline',
						'el-icon-picture-outline-round',
						'el-icon-upload', 'el-icon-upload2', 'el-icon-download', 'el-icon-camera-solid',
						'el-icon-camera', 'el-icon-video-camera-solid', 'el-icon-video-camera',
						'el-icon-message-solid', 'el-icon-bell', 'el-icon-s-cooperation',
						'el-icon-s-order', 'el-icon-s-platform', 'el-icon-s-fold', 'el-icon-s-unfold',
						'el-icon-s-operation', 'el-icon-s-promotion', 'el-icon-s-home', 'el-icon-s-release',
						'el-icon-s-ticket', 'el-icon-s-managemen', 'el-icon-s-open', 'el-icon-s-shop',
						'el-icon-s-marketing',
						'el-icon-s-flag', 'el-icon-s-comment', 'el-icon-s-finance', 'el-icon-s-claim',
						'el-icon-s-custom', 'el-icon-s-opportunity', 'el-icon-s-data', 'el-icon-s-check',
						'el-icon-s-grid', 'el-icon-menu', 'el-icon-share', 'el-icon-d-caret', 'el-icon-caret-left',
						'el-icon-caret-right', 'el-icon-caret-bottom', 'el-icon-caret-top', 'el-icon-bottom-left',
						'el-icon-bottom-right', 'el-icon-back', 'el-icon-right', 'el-icon-bottom', 'el-icon-top'
					]
				},

			}
		},
		mounted() {
			that = this
		},
		methods: {
			submitDialogInput(){
				this.$refs.ruledialogInput.validate((valid) => {
					if (valid) {
						if (that.dialogInput.title == '添加输入框配置') {
							//添加输入框配置
							that.addfieldControl()
						} else if (that.dialogInput.title == '编辑') {
							//编辑输入框配置
							that.fieldControl_edit()
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//编辑输入框配置
			fieldControl_edit(){
				let req={
					...that.dialogInput.ruleForm,
					fieldLabel:that.dialogInput.ruleForm.fieldObj.columnComment,
					fieldName:that.dialogInput.ruleForm.fieldObj.columnName
				}
				that.GLOBAL.doPost(that.api.GLOBAL_setting_fieldControl_edit, req).then((res) => {
					if (res.code == 200) {
						that.$message.success(res.message)
						//刷新权限列表
						that.$emit('refresh', true)
						that.dialogInput.show=false
					}
				})
			},
			//添加输入框配置
			addfieldControl(){
				let req={
					...that.dialogInput.ruleForm,
					fieldLabel:that.dialogInput.ruleForm.fieldObj.columnComment,
					fieldName:that.dialogInput.ruleForm.fieldObj.columnName
				}
				that.GLOBAL.doPost(that.api.GLOBAL_setting_fieldControl_add, req).then((res) => {
					if (res.code == 200) {
						that.$message.success(res.message)
						//刷新权限列表
						that.$emit('refresh', true)
						// that.dialogInput.show=false
					}
				})
				
			},
			//初始化权限参数和输入框配置参数
			initDialog() {
				that.dialog.show = false
				that.dialog.ruleForm = {
					parentId: '', //父节点
					name: '', //名称
					code: '', //编码
					url: '', //路径
					icon: '', //图标
					sortNo: '', //排序
					menuType: 0, //类型 0一级菜单 1子菜单 2按钮
				}
				that.dialogInput.show = false
				that.dialogInput.ruleForm = {
					menuName:'',//菜单名称
					menuNo:'',//菜单编号
					tableName:'',//表名
					fieldObj: '', //字段对象
					isGrid:0, //是否显隐 0显示
					isVisible: 0, //是否显隐 0显示
					isInput: 1, //是否必填 0必填
					isDisplay: 1, //是否只读 0只读
					note: '', //备注说明
				}
			},
			//选取图标
			selectIcon(item) {
				that.dialog.ruleForm.icon = item
				that.drawer.show = false
			},
			//权限表格按钮
			permissionBtn(row, text) {
				console.log(row);
				if (text == '编辑') {
					that.dialog.ruleForm = {
						...row
					}
					that.dialog.show = true
					that.dialog.title = '编辑权限'
				} else if (text == '删除') {
					this.$confirm(`是否删除当前【${row.name}】?`, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						//删除权限
						that.delectPermission(row)
					}).catch(() => {});
				}
			},
			//删除权限
			delectPermission(row) {
				that.GLOBAL.doPost(that.api.GLOBAL_sys_permission_deletePermission, {
					id: row.id
				}).then((res) => {
					if (res.code == 200) {
						that.$message.success(res.message)
						//刷新权限列表
						that.$emit('refresh', true)
					}
				})
			},
			//编辑权限
			updatePermission() {
				that.GLOBAL.doPost(that.api.GLOBAL_sys_permission_editPermission, that.dialog.ruleForm).then((res) => {
					if (res.code == 200) {
						that.$message.success(res.message)
						//刷新权限列表
						that.$emit('refresh', true)
						//初始化权限参数和输入框配置参数
						that.initDialog()
						//刷新菜单栏
						// bus.$emit('RefreshMeum',true)

					}
				})
			},
			//获取输入框配置列表
			getPermissionUrlList() {
				let req = {
					menuNo: that.activeInfo.id,
					pageNo: that.table.page.pageNo,
					pageSize: that.table.page.pageSize
				}
				that.GLOBAL.doGet(that.api.GLOBAL_setting_fieldControl_list, req).then((res) => {
					if (res.code ==200 && res.result&&res.result.records.length>0) {
						that.table.page.total = res.result.total
						that.table.list = res.result.records
					} else {
						that.table.page.total = 0
						that.table.list = []
					}
				})
			},
			//输入框配置
			urlBtn(row, text) {
				if (text == '删除') {
					this.$confirm(`是否删除当前顶?`, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						//删除url
						that.delectUrl(row)
					}).catch(() => {});
				}else if(text == '编辑'){
					//初始化权限参数和输入框配置参数
					that.initDialog()
					that.dialogInput.title = text
					that.dialogInput.ruleForm= {
						...row,
						fieldObj:{
							columnName: that.$lizhao.camelToSnakeCase.line(row.fieldName),//驼峰转蛇形
							columnComment:row.fieldLabel,
							tableComment:null,
							tableName:null
						}
					}
					//查询数据库所有表
					that.getQueryTableList()
					//获取当前表里面的所有字段
					that.setting_queryColumnLists()
					
				}
			},
			//删除输入框配置
			delectUrl(row) {
				let req = {
					id: row.id,
				}
				that.GLOBAL.doPost(that.api.GLOBAL_setting_fieldControl_delete, req).then((res) => {
					if (res.code ==200) {
						that.$message.success(res.result)
						//获取权限拥有的输入框列表
						that.getPermissionUrlList()
					}
				})
			},
			//按钮操作
			clickBtnType(text, event) {
				if (text == '添加输入框配置') {
					//初始化权限参数和输入框配置参数
					that.initDialog()
					that.dialogInput.title = text
					//查询数据库所有表
					that.getQueryTableList()
				} else if (text == '添加权限') {
					that.dialog.show = true
					that.dialog.title = text
				}
			},
			//查询数据库所有表
			getQueryTableList(){
				that.GLOBAL.doGet(that.api.GLOBAL_setting_setting_queryTableList, {}).then((res) => {
					if (res.code == 200) {
						that.dialogInput.tableNameList=res.result
						that.dialogInput.show = true
					}
				})
			},
			//切换表名时获取当前表里面的所有字段
			dialogInputSelectChange(){
				that.dialogInput.tableColumnList=[]
				//把之前的已选择的字段清空
				that.dialogInput.ruleForm.fieldObj=''
				if(that.dialogInput.ruleForm.tableName){
					// 获取当前表里面的所有字段
					that.setting_queryColumnLists()
				}
				
			},
			//获取当前表里面的所有字段
			setting_queryColumnLists(){
				that.GLOBAL.doGet(that.api.GLOBAL_setting_setting_queryColumnLists, {tableName:that.dialogInput.ruleForm.tableName}).then((res) => {
					if (res.code == 200) {
						that.dialogInput.tableColumnList=res.result
					}
				})
			},
			//权限弹框确认
			submitForm() {
				this.$refs.ruleForm.validate((valid) => {
					if (valid) {
						if (that.dialog.title == '添加权限') {
							//添加权限
							that.addPermission()
						} else if (that.dialog.title == '编辑权限') {
							//编辑权限
							that.updatePermission()
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//添加权限
			addPermission() {
				console.log(that.dialog.ruleForm);
				let req={
					icon:that.dialog.ruleForm.icon,//图标
					menuType:that.dialog.ruleForm.menuType ,//类型 0一级菜单 1子菜单 2按钮
					name:that.dialog.ruleForm.name, //名称
					parentId:that.dialog.ruleForm.parentId, //父节点
					sortNo:that.dialog.ruleForm.sortNo, //排序
					url:that.dialog.ruleForm.url, //路径
				}
				that.GLOBAL.doPost(that.api.GLOBAL_sys_permission_addPermission, req).then((res) => {
					if (res.code == 200) {
						that.$message.success(res.message)
						//刷新权限列表
						that.$emit('refresh', true)
					}
				})
			},
			//切换页
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				that.table.page.pageNo = val
				//获取权限列表
				that.getPermissionUrlList()
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				that.table.page.pageSize = val
				//获取权限列表
				that.getPermissionUrlList()
			},
		}

	}
</script>

<style lang="scss" scoped>
	/deep/ :focus {
		outline: 0;
	}

	.right-center {

		.lz-header {
			margin-top: 10px;
		}

		.r-c-center {
			overflow: hidden;

			.el-pagination {
				float: right;
				margin-top: 10px;
			}
		}

		.lz-header-bt {
			margin-left: 10px;
			margin-bottom: 10px;
		}

		.drawer-ul {
			display: flex;
			flex-wrap: wrap;
			border-top: 1px solid #eee;
			border-left: 1px solid #eee;
			padding: 0;

			.ul-li {
				padding: 0 5px;
				display: flex;
				flex-direction: column;
				width: 100px;
				height: 100px;
				border-right: 1px solid #eee;
				border-bottom: 1px solid #eee;
				cursor: pointer;

				.p1 {
					font-size: 30px;
					height: 70px;
					align-items: center;
					justify-content: space-around;
					display: flex;
				}

				.p2 {
					font-size: 12px;
					text-align: center;
					height: 30px;
				}
			}
		}
	}
</style>
